<html>
<head>
<meta charset="utf-8">
<title>聚合搜索</title>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 代码写的匆忙 很多地方需要改写 但是这个主要是我自己用 各位大佬勿喷

    var curr = -1;
// 跳转页面
function skipTab(webName){
    // 获得查询的网站名称
    // 获得输入框的值
    var value = document.getElementById("searchWord").value;
    switch(webName){
        case "csdn":
            var csdn =  "https://so.csdn.net/so/search/s.do?q="+value+"&t=blog&o=&s=&l=&f=";
            window.open(csdn,'csdn');
            break;
        case "Baidu":
            var baidu = "https://www.baidu.com/s?ie=UTF-8&wd="+value;
            window.open(baidu,'Baidu');
            break;
        case "Bing":
        var bing = "https://cn.bing.com/search?q="+value;
            window.open(bing,'Bing');
            break;
        case "bilibili":
        var bilibili = "https://search.bilibili.com/video?keyword="+value;
            window.open(bilibili,'bilibili');
            break;
        case "juejin":
        var juejin= "https://juejin.im/search?query="+value+"&type=article";
            window.open(juejin,'juejin');
            break;
        break;
        case "jingdong":
            var jingdong = "https://search.jd.com/Search?keyword="+value+"&enc=utf-8&wq="+value;
            window.open(jingdong,'jingdong');
            break;
        case "jianshu":
            var jianshu = "https://www.jianshu.com/search?q="+value+"&page=1&type=note";
            window.open(jianshu,'jianshu');
            break;
        break;
        case "zhihu":
            var zhihu = "https://www.zhihu.com/search?type=content&q="+value;
            window.open(zhihu,'zhihu');
            break;
        break;
        case "cnblog":
            var cnblog = "https://zzk.cnblogs.com/s?t=b&w="+value;
            window.open(cnblog,'cnblog');
            break;
        
        break;
        case "github":
            var github = "https://github.com/search?q="+value+"&type=Repositories";
            window.open(github,'github');
            break;
        break;
        case "stackOverflow":
            var stackOverflow = "https://stackoverflow.com/search?q="+value;
            window.open(stackOverflow,'stackOverflow');
            break;
        break;

    }
}

// js使用正则表达式
function regexFilter(msg) {
    //console.log("+++++++++++++++>"+msg.toString());
    var reg = new RegExp("<strong>([\\S\\s]+?)</strong>");
    //console.log(reg.exec(msg));


}

// 动态生辰bing的推荐
function dynamicCreateElementOfBing(arr){

    if(arr==null){
        $("#commentParentBing").remove();
        return;
    }
    var parent = document.getElementById("commentParentBing");

    var app = document.getElementById("app");

    $("#commentParentBing").remove();

    var divP = document.createElement("div");

    divP.setAttribute("id","commentParentBing");

    divP.style.width="400px";

    // divP.style="CommentParent";
    app.appendChild(divP);

    for (var  index = 0; index < arr.length; index++) {
        var div = document.createElement("button");
        div.setAttribute("id","i");
        // div.setAttribute("onmouseover","font-size='22px'");
        // div.setAttribute("onmouseout","font-size='16px'");
        div.style.height="40px";
        div.style.display="flex";
        div.style.flexDirection="row";
        div.style.justifyContent="flex-start";
        div.style.border="none";
        div.style.width="400px";
        div.style.fontSize="18px";
        div.style.outline="none";
        div.style.background="rgba(240, 235, 235, 0.01)";

        div.addEventListener("click",(event)=>{
            // 改变输入框的值
            changeInputvalue(event.srcElement.innerHTML);
        });
        div.addEventListener("mouseover",(event)=>{
            event.srcElement.style.fontSize="22px";
        });
        div.addEventListener("mouseout",(event)=>{
            event.srcElement.style.fontSize="18px";
        });

        div.innerText=arr[index].q;
        divP.appendChild(div);
    }
}

// 动态生成元素
function dynamicCreateElement(arr){

    if(arr==null){
        $("#commentParent").remove();
        return;
    }

    var parent = document.getElementById("commentParent");

    var app = document.getElementById("app");

    $("#commentParent").remove();

    var divP = document.createElement("div");

    divP.setAttribute("id","commentParent");

    divP.style.width="400px";

    // divP.style="CommentParent";
    app.appendChild(divP);

    for (var  index = 0; index < arr.length; index++) {
        var div = document.createElement("button");
        div.setAttribute("id",index);
        div.setAttribute("class","com");
        div.style.height="40px";
        div.style.display="flex";
        div.style.flexDirection="row";
        div.style.justifyContent="flex-start";
        div.style.border="none";
        div.style.width="400px";
        div.style.fontSize="18px";
        div.style.outline="none";
        div.style.background="rgba(240, 235, 235, 0.01)";

        div.addEventListener("click",(event)=>{
            // 改变输入框的值
            changeInputvalue(event.srcElement.innerHTML);
        });
        div.addEventListener("mouseover",(event)=>{
            event.srcElement.style.fontSize="22px";
        });
        div.addEventListener("mouseout",(event)=>{
            event.srcElement.style.fontSize="18px";
        });
    
        div.innerText=arr[index].q;
        divP.appendChild(div);
    }
}
// 改变input的值
function changeInputvalue(params) {
    $("#searchWord").val('');
    $("#searchWord").val(params);
}

// 请求推荐搜索数据
function ajaxCommentMsg(msg){
   $.ajax({
       url:"https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&from=pc_web&wd="+msg,
       type:"get",
       dataType:"jsonp",
       contentType: 'application/json',
       Host: "www.baidu.com",
        success: function(data){
            //console.log(data);
            dynamicCreateElement(data.g);
            //dynamicCreateElementOfBing(data.g);
        },
        error: function(xhr, type){

        }
   })
}
// 请求bing数据
function ajaxCommentMsgOfBing(msg){
    if (msg.length<=1){
        dynamicCreateElementOfBing(null);
    }
    msg = msg.substr(0,msg.length/2);
    $.ajax({
        url:"https://www.baidu.com/sugrec?ie=utf-8&json=1&prod=pc&from=pc_web&wd="+msg,
        type:"get",
        dataType:"jsonp",
        Host: "www.baidu.com",
        contentType: 'application/json',
        success: function(data){
            //console.log(data);
            //dynamicCreateElement(data.g);
            dynamicCreateElementOfBing(data.g);
        },
        error: function(xhr, type){

        }
    })
}

// 监听input内容变化 发送ajax请求数据
function commentList(){
    $("#searchWord").bind("input propertychange",function (event) {
        //console.log($('#searchWord').val());
        var msg = $("#searchWord").val();
        curr=-1;
        ajaxCommentMsg(msg);
       // ajaxCommentMsgOfBing(msg);
    })
}

window.onload = function () {
            //监听input 内容
            commentList();
            listernKeyBoard();

};

// 监听左右键的
function listernKeyBoard() {

    $(document).keydown(function(e){
        console.log(e.keyCode);  //获取当前按键的键码
        element = document.getElementById("commentParent");
        switch (e.keyCode){
            case 40:
                var arr = element.getElementsByClassName("com");
                if (curr>=arr.length-1){
                    arr[curr].style.fontSize="18px";
                    curr = -1;
                }
               changeInputvalue(arr[curr+1].innerText);
               arr[curr+1].style.fontSize="22px";
               if (curr > -1){
                   arr[curr].style.fontSize="18px";
               }
                curr = curr + 1;
               break;
            case 38:
                event.preventDefault();
                var arr = element.getElementsByClassName("com");
                if (curr <= 0){
                    arr[curr].style.fontSize="18px";
                    curr = arr.length-1;
                }
                if (curr <= 0){
                    break;
                }
                changeInputvalue(arr[curr-1].innerText);
                arr[curr -1].style.fontSize="22px";
                if (curr > -1){
                    arr[curr].style.fontSize="18px";
                }
                curr = curr -1;
                break;
            // enter 开始搜索
            case 13:
                skipTab("Baidu");
                break;
            // 监听左右键 切换不同的搜索
            case 78:

        }

    });
}

</script>
<style type="text/css">
body {
    /* 在这设置背景图片 */
    background-image: url("http://b-ssl.duitang.com/uploads/item/201704/15/20170415224802_NyUYe.png");
    background-size: cover;
    background-repeat:no-repeat;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
    }
.TabBarContainer{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center}
.TabBar{
    border: none;
    outline: none;
    font-size: 32px;
    background: rgba(240, 235, 235, 0.01);
    font-weight: bold;
    font-family:Georgia,serif;
    font-style:oblique;}
.SearchInputContext{
    display: -webkit-flex; /* Safari */
    display: flex;
    margin-top: 60px;
    flex-direction: row;
    align-items: center;
    justify-content: center;}
.CommentParent{
    margin-top: 20px;
    display: flex;
    width: 400px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    }
.CommentSuperparent{
    display: flex;
    justify-content: flex-start;
    width: 800px;
    flex-direction: row;
}
.SearchInput{
    background: rgba(240, 235, 235, 0.01);
   height: 50px;
   width: 800px;
   margin-right: 20px;
   font-size: 20px;
   padding-left: 12px;}
.Comment{
    height: 50px;
    width: 400px;
   }
.App {
  text-align: center;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.weixin{
        top: 400px;
        position: fixed;
        right: 100px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .commentPerson{
        position: fixed;
        bottom: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 18px;
        align-items: center;
    }
</style>
</head>
<body class="App" >

        <!--<div class="TabBarContainer">-->
            <!--<button onclick="skipTab('bilibili')" class="TabBar">哔哩哔哩</button>-->
            <!--<button onclick="skipTab('stackOverflow')" class="TabBar">stackOverflow</button>-->
            <!--<button onclick="skipTab('jingdong')" class="TabBar">京东</button>-->
            <!--<button onclick="skipTab('Bing')" class="TabBar">淘宝</button>-->
            <!--<button onclick="skipTab('jianshu')" class="TabBar">简书</button>-->
        <!--</div>-->

        <div class="TabBarContainer">
            <button onclick="skipTab('juejin')" class="TabBar">Juejin</button>
            <button onclick="skipTab('csdn')" class="TabBar">CSDN</button>
            <button onclick="skipTab('jianshu')" class="TabBar">Jianshu</button>
            <button onclick="skipTab('Baidu')" class="TabBar">Baidu</button>
            <button onclick="skipTab('stackOverflow')" class="TabBar">stackOverflow</button>
            <button onclick="skipTab('github')" class="TabBar">Github</button>
            <button onclick="skipTab('cnblog')" class="TabBar">Cnblogs</button>
            <button onclick="skipTab('zhihu')" class="TabBar">Zhihu</button>
            <button onclick="skipTab('bilibili')" class="TabBar">bilibili</button>
        </div>



 <div class="SearchInputContext">
    <input id="searchWord" class="SearchInput" type="text" />

 </div>

<div class="CommentSuperparent" id="app">


    <div class="CommentParent" id= "commentParent">

    </div>
    <!--<div class="CommentParent" id= "commentParentBing">-->

    <!--</div>-->


</div>

<div class="weixin" >
    <image style="width:100px;height:100px" src="http://a4.qpic.cn/psb?/V132xVxi2QJ0ul/Bc*GnmJTLL.DTM86yYZ06sOxmTnVQG30kCKQo54Fh9g!/c/dIMAAAAAAAAA&ek=1&kp=1&pt=0&bo=rgGuAQAAAAAAACY!&tl=3&vuin=1377204804&tm=1571493600&sce=60-2-2&rf=0-0"></image>
</div>


    <div class="commentPerson">
       <text>主动一点 我们才会有故事  右边微信</text>
    </div>

 </body>
</html>
